<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li {
				float: left;
				list-style-type: none;
				padding: 10px 30px;
				font-size: 14px;
				font-weight: 400;
				color: #666;
			}

			li:hover {
				color: red;
			}

			.kc {
				width: 200px;
				height: 200px;
				border: 1px solid orange;
				float: left;
			}

			.clearfix::after {
				content: "";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
		</style>
	</head>
	<body>
		<div class="clearfix">
			<ul>
				<li>上新</li>
				<li>免费</li>
				<li>热门</li>
				<li>入门</li>
				<li>进阶</li>
			</ul>
		</div>
		<div>
			<div class="kc">1</div>
			<div class="kc">2</div>
			<div class="kc">3</div>
			<div class="kc">4</div>
		</div>
	</body>
</html>
